<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			div {
				padding: 0.5em;
				width: 10em;
				height: 10em;
				border: 0.2em solid #333;
				font-family: Monaco, monospace;
				font-weight: bold;
				background: rgba(100%, 100%, 100%, .85);
	
			}

			.relative {
				position: relative;
				border: 0.1em solid #0000FF;
				left: 4em;
				top: 5em; 
			}
			
			
			.absolute {
				position: absolute;
				border: 0.1em solid #0000FF;
				left: 2em;
				top: 4em; 
			}
		</style>
	</head>
	<body>
		
		<!-- 
		 
		 相对定位  如果 有 left  top 这些值  会移动位置，紧跟在后面的其他的元素 不会挤进去的
		 
		 绝对定位  如果 改变位置 left,top bottom right ,会改变位置，其他元素 会挤进去的。
		 -->



		<!-- <div  class="absolute">AAAA </div> -->
		<div  class="relative">AAAA </div>
		<span > Hello world </span>
		
	</body>
</html>
